<template>
  <div class="permission-editor">
    <!-- 系统权限 -->
    <div class="section">
      <div class="section-title">系统权限</div>
      <div class="section-content">
        <el-checkbox 
          v-model="hasAllSystem"
          @change="handleAllSystemChange"
        >全选</el-checkbox>
        <el-checkbox-group 
          v-model="systemPermissions"
          @change="handleSystemChange"
        >
          <el-checkbox value="view">查看</el-checkbox>
          <el-checkbox value="add">新增</el-checkbox>
          <el-checkbox value="edit">编辑</el-checkbox>
          <el-checkbox value="delete">删除</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!-- 业务权限 -->
    <div class="section">
      <div class="section-title">业务权限</div>
      <div class="section-content">
        <el-checkbox 
          v-model="hasAllBusiness"
          @change="handleAllBusinessChange"
        >全选</el-checkbox>
        <el-checkbox-group 
          v-model="businessPermissions"
          @change="handleBusinessChange"
        >
          <el-checkbox value="view">查看</el-checkbox>
          <el-checkbox value="export">导出</el-checkbox>
          <el-checkbox value="import">导入</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!-- 数据权限 -->
    <div class="section">
      <div class="section-title">数据权限</div>
      <div class="section-content">
        <el-form label-width="80px">
          <el-form-item label="数据范围">
            <el-radio-group v-model="dataScope" @change="updateModelValue">
              <el-radio value="all">全部数据</el-radio>
              <el-radio value="department">本部门数据</el-radio>
              <el-radio value="self">个人数据</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="字段权限">
            <el-checkbox 
              v-model="hasAllFields"
              @change="handleAllFieldsChange"
            >全选</el-checkbox>
            <el-checkbox-group 
              v-model="fieldPermissions"
              @change="handleFieldsChange"
            >
              <el-checkbox value="basic">基础字段</el-checkbox>
              <el-checkbox value="sensitive">敏感字段</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      system: [],
      business: [],
      data: {
        scope: 'self',
        fields: []
      }
    })
  },
  templateType: {
    type: String,
    default: 'custom'
  }
})

const emit = defineEmits(['update:modelValue'])

// 系统权限
const hasAllSystem = ref(false)
const systemPermissions = ref([])

// 业务权限
const hasAllBusiness = ref(false)
const businessPermissions = ref([])

// 数据权限
const dataScope = ref('self')
const hasAllFields = ref(false)
const fieldPermissions = ref([])

// 系统权限选项
const systemPermissionOptions = [
  { label: '查看', value: 'view' },
  { label: '新增', value: 'add' },
  { label: '编辑', value: 'edit' },
  { label: '删除', value: 'delete' }
]

// 业务权限选项
const businessPermissionOptions = [
  { label: '查看', value: 'view' },
  { label: '导出', value: 'export' },
  { label: '导入', value: 'import' }
]

// 字段权限选项
const fieldPermissionOptions = [
  { label: '基础字段', value: 'basic' },
  { label: '敏感字段', value: 'sensitive' }
]

// 监听输入值变化
watch(() => props.modelValue, (newVal) => {
  console.log('PermissionRuleEditor - 接收到新的权限值:', newVal)
  
  if (!newVal) {
    console.log('权限值为空，使用默认值')
    return
  }
  
  // 更新系统权限
  systemPermissions.value = newVal.system || []
  hasAllSystem.value = systemPermissions.value.length === systemPermissionOptions.length &&
    systemPermissionOptions.every(opt => systemPermissions.value.includes(opt.value))
  
  console.log('系统权限更新:', {
    权限值: systemPermissions.value,
    选项列表: systemPermissionOptions,
    是否全选: hasAllSystem.value,
    权限数量: systemPermissions.value.length,
    选项数量: systemPermissionOptions.length,
    全部包含: systemPermissionOptions.every(opt => systemPermissions.value.includes(opt.value))
  })
  
  // 更新业务权限
  businessPermissions.value = newVal.business || []
  hasAllBusiness.value = businessPermissions.value.length === businessPermissionOptions.length &&
    businessPermissionOptions.every(opt => businessPermissions.value.includes(opt.value))
  
  console.log('业务权限更新:', {
    权限值: businessPermissions.value,
    选项列表: businessPermissionOptions,
    是否全选: hasAllBusiness.value,
    权限数量: businessPermissions.value.length,
    选项数量: businessPermissionOptions.length,
    全部包含: businessPermissionOptions.every(opt => businessPermissions.value.includes(opt.value))
  })
  
  // 更新数据权限
  if (newVal.data) {
    dataScope.value = newVal.data.scope || 'self'
    fieldPermissions.value = newVal.data.fields || []
    hasAllFields.value = fieldPermissions.value.length === fieldPermissionOptions.length &&
      fieldPermissionOptions.every(opt => fieldPermissions.value.includes(opt.value))
    
    console.log('数据权限更新:', {
      数据范围: dataScope.value,
      字段权限: fieldPermissions.value,
      选项列表: fieldPermissionOptions,
      是否全选: hasAllFields.value,
      权限数量: fieldPermissions.value.length,
      选项数量: fieldPermissionOptions.length,
      全部包含: fieldPermissionOptions.every(opt => fieldPermissions.value.includes(opt.value))
    })
  }
}, { deep: true, immediate: true })

// 更新模型值
const updateModelValue = () => {
  emit('update:modelValue', {
    system: systemPermissions.value,
    business: businessPermissions.value,
    data: {
      scope: dataScope.value,
      fields: fieldPermissions.value
    }
  })
}

// 系统权限全选
const handleAllSystemChange = (val) => {
  hasAllSystem.value = val
  systemPermissions.value = val ? systemPermissionOptions.map(item => item.value) : []
  updateModelValue()
}

// 系统权限变更
const handleSystemChange = (val) => {
  systemPermissions.value = val
  hasAllSystem.value = val.length === systemPermissionOptions.length
  updateModelValue()
}

// 业务权限全选
const handleAllBusinessChange = (val) => {
  hasAllBusiness.value = val
  businessPermissions.value = val ? businessPermissionOptions.map(item => item.value) : []
  updateModelValue()
}

// 业务权限变更
const handleBusinessChange = (val) => {
  businessPermissions.value = val
  hasAllBusiness.value = val.length === businessPermissionOptions.length
  updateModelValue()
}

// 字段权限全选
const handleAllFieldsChange = (val) => {
  hasAllFields.value = val
  fieldPermissions.value = val ? fieldPermissionOptions.map(item => item.value) : []
  updateModelValue()
}

// 字段权限变更
const handleFieldsChange = (val) => {
  fieldPermissions.value = val
  hasAllFields.value = val.length === fieldPermissionOptions.length
  updateModelValue()
}
</script>

<style lang="scss" scoped>
.permission-editor {
  .section {
    margin-bottom: 24px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 16px;
      color: #303133;
    }
    
    .section-content {
      .el-checkbox {
        margin-right: 24px;
        margin-bottom: 8px;
      }
      
      .el-checkbox-group {
        margin-top: 8px;
      }
      
      .el-form-item {
        margin-bottom: 16px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style> 